import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
  useMediaQuery,
  Grid,
} from '@material-ui/core';
import { useSelector, useDispatch } from 'react-redux'
import { useHistory, useParams } from "react-router-dom";
import { setCommunityBlogItem } from 'redux/actions/CommunityActions';
import BlogItem from './BlogItem'


const Courses = props => {
  const { data, className, ...rest } = props;
  const history = useHistory();
  const dispatch = useDispatch()

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  const moveBlogPage = (blog) => {
    dispatch(setCommunityBlogItem(blog));
    history.push(`/community/post/${blog.id}`);
  }

  return (
    <div className={className} {...rest}>
      {/* <SectionHeader
                title={
                    <span>
                        Browse our <Typography color="secondary" variant="inherit" component="span">popular courses</Typography>
                    </span>
                }
                subtitle="Here are our popular sub topics you might want to learn more."
                fadeUp
            /> */}
      <Grid container spacing={isMd ? 4 : 2}>
        {data.map((item, index) => (
          <Grid key={index} item xs={12} sm={12} md={4} data-aos="fade-up">
            <BlogItem data={item} onClick={ e => {
              e.stopPropagation();
              moveBlogPage(item);
            }}/>
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

Courses.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.array.isRequired,
};

export default Courses;
